<!-- 面包屑 -->
<template>
  <el-card class="crumbs-box-card">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: `${item.meta.parentPath}` }" :key="index" v-for="(item,index) in dataArr">{{ item.meta.title }}</el-breadcrumb-item>
    </el-breadcrumb>
  </el-card>
</template>

<script>
export default {
  name: "crumbs",
  data() {
    return {
      dataArr:[]
    };
  },
  watch: {
    $route:{
      handler(newVal){
        this.dataArr = newVal.matched
      },
      deep:true,
      immediate:true
    }
  }
};
</script>

<style scoped lang="less">
.crumbs-box-card {
  width: 100%;
  background-color: rgb(255, 255, 255);
  padding-left: 10px;
  /deep/.el-card__body {
    padding: 0px;
    .el-breadcrumb {
      line-height: 50px;
      /deep/span {
        font-size: 13px;
      }
    }
  }
}
</style>
